<template>
  <div class="container">
    <van-nav-bar
      right-text="搜索"
      @click-right="search"
    >
      <template #left>
        <van-icon name="arrow-left" color="#565656" size="20" @click="goBack"/>
      </template>
      <template #title>
        <van-search
          v-model="keywords"
          shape="round"
          left-icon=""
          :clearable="false"
          placeholder="搜索关键词"
        />
      </template>
    </van-nav-bar>
      <Empty v-if="courses.list.length == 0"></Empty>
      <van-list
        v-else
        :immediate-check="false"
        v-model="loading"
        :finished="finished"
        finished-text="已经到底了"
        @load="onLoad"
      >
        <VodCourse :courses="courses.list"></VodCourse>
      </van-list>
  </div>
</template>

<script>
import Empty from '@/components/common/Empty';
import VodCourse from '@/components/content/VodCourse';
import { getSearchData } from '@/network/home';

export default {
  components: {
    Empty,
    VodCourse,
  },
  data() {
    return {
      loading: false,
      finished: false,
      keywords: this.$route.query.keywords,
      courses: { page: 1, list: [] },
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    onLoad() {
      getSearchData(this.courses.page, this.keywords).then((res) => {
        this.courses.list.push(...res.data.data);
        this.loading = false;
        this.courses.list.page += 1;
        if (this.courses.list.length > res.data.data.length) {
          this.finished = true;
        }
      });
    },
    search() {
      getSearchData(this.courses.page, this.keywords).then((res) => {
        this.courses.list = res.data.data;
        this.courses.page += 1;
      });
    },
  },
  created() {
    getSearchData(this.courses.page, this.keywords).then((res) => {
      this.courses.list = res.data.data;
      this.courses.page += 1;
    });
  },
};
</script>

<style lang="less" scoped>
.container {
  height: 100vh;
  background-color: #f6f6f6;
  /deep/ .van-nav-bar__title {
    flex: 1;
    max-width: 80%;
    .van-search {
      padding: 0 12px;
    }
  }
}
</style>
